<template>
	<view>
		<view class="details" v-if="viewConfig[obj.type].search && viewConfig[obj.type].search.length">
			<view style="margin: 0 0 15px 0;padding: 10px;" v-if="isSearch">
				<u--form :model="formData" ref="uForm">
					<u-form-item v-for="item in viewConfig[obj.type].search" :label="item.label" prop="areaName"
						labelWidth='80px' @click='provinceShow=true'>
						<text v-if="item.type == 'text'">
							{{ obj.rowData[item.prop] }}
						</text>
						<u-input v-else-if="item.type == 'input'" v-model="formData[item.prop]"
							:placeholder="'输入'+item.label"></u-input>
						<u-radio-group v-else-if="item.type == 'radio'" v-model="formData[item.prop]" placement="row"
							size='25' @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(key, index) in options[obj.type]"
								:key="index" :label="key.label" :name="key.value" style='padding:0 15rpx 0 0'
								labelSize='25'>
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u--form>
				<view class="details_top">
					<u-button type="primary" text="查询" class='but' @click="queryClick()"></u-button>
				</view>
			</view>
			<view class="tableCss">
				<v-table ref="refTable" :columns="viewConfig[obj.type].table" :list="dataList" thColor='#D7E7FC'
					typeQuote='examine' withTable='500px'>
				</v-table>
			</view>
		</view>
	</view>
</template>

<script>
	import vTable from './table-list.vue'
	import * as api from '@/common/api/riskAssess.js'
	export default {
		components: {
			vTable
		},
		props: {},
		data() {
			return {
				options: {
					yyclnsl: [],
					check_result_obj: {},
					dzydsyl: [{
							label: "未填报",
							value: "0"
						},
						{
							label: "已填报",
							value: "1"
						},
					],
					clsxl: [{
							label: "未上线",
							value: "0"
						},
						{
							label: "已上线",
							value: "1"
						},
					],
					cltxyydppl: [{
							label: "匹配",
							value: "1"
						},
						{
							label: "不匹配",
							value: "0"
						},

					],
					cltxygjppl: [{
							label: "无轨迹",
							value: "0"
						},
						{
							label: "有轨迹",
							value: "1"
						},
					],
					clgjwzl: [{
							label: "不完整",
							value: "0"
						},
						{
							label: "完整",
							value: "1"
						},
					]
				},

				formData: {},
				viewConfig: {
					yyclnsl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text"
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text"
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: "input",
							},
							{
								label: "审验情况",
								prop: "checkResult",
								type: "radio",
							}
						],
						table: [{
								title: "车牌号码",
								key: 'vehCode',
								$width: '90px',
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							},
							{
								title: '年审日期',
								key: 'checkDate',
								$width: '120px',
								format: ({
									item
								}) => {
									return `<span >${item.checkDate.slice(0, 10) }</span>`;
								},
							},
							{
								title: '年审状态',
								key: 'itemStatement',
								$width: '120px',
								format: ({
									item
								}) => {
									if (item.checkResult == 0) {
										return `<span  style="border:1px #1D62BE solid;padding:5px 20px;background:#DBEAFF;color:#1D62BE">${ this.options.check_result_obj[item.checkResult]}</span>`;
									}

									if (item.checkResult == 1) {
										return `<span   style="border:1px #0E9532 solid;padding:5px 20px;background:#E6FFF5;color:#0E9532">${ this.options.check_result_obj[item.checkResult]}</span>`;
									}

									if (item.checkResult == 2) {
										return `<span  style="border:1px #D61010 solid;padding:5px 20px;background:#FFF3F5;color:#D61010">${ this.options.check_result_obj[item.checkResult]}</span>`;
									}
								},
							},

						],
					},
					jtzfcfajl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: 'input'
							},
						],
						table: [{
								title: "车牌号码",
								key: 'vehCode',
								$width: '90px',
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							},
							{
								title: '案件发生时间',
								key: 'occurenceTime',
								$width: '140px',
								format: ({
									item
								}) => {
									return `<span >${item.occurenceTime.slice(0, 10) }</span>`;
								},
							},
							{
								title: "案由",
								$width: '100px',
								key: 'cause',
							},

						],
					},
					dzydsyl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: 'input'
							},
							{
								label: "电子运单填报状态",
								prop: "fillingStatus",
								type: "radio",
							},
						],
						table: [{
								title: "车牌号码",
								key: "vehCode",
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							},
							{
								title: "最后一次填报时间",
								key: "waybillFillTime",
							},
							{
								title: "运单数",
								key: "waybillCount",
							},
						],
					},
					jsyjf: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "姓名",
								prop: "driverName",
								type: 'input'
							}
						],
						table: [{
								title: "姓名",
								key: "driverName",
								$width: '60px',
							},
							{
								title: "身份证号",
								key: "idCard",
								$width: '120px'
							},
							{
								title: "当前周期累计积分",
								key: "creditCount",
								$width: '140px'
							},
						],
					},
					clsxl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: 'input'
							},
							{
								label: "上线状态",
								prop: "onlineStatus",
								type: "radio",

							},
						],
						table: [{
								title: "车牌号码",
								key: "vehCodeColor",
								$width: '90px',
								format: ({
									item
								}) => {
									;
									return `<span >${item.vehCode + (item.vehColor && `(${item.vehColor})`)}</span>`;
								},
							}, {
								title: "最后一次上线时间",
								key: "lastGpsTime",
								$width: '130px',
							},
							{
								title: "不在线时长",
								key: "offLineDays",
								$width: '130px',
							},
						],
					},
					cltxyydppl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: 'input'
							},
							{
								label: "车辆通行与运单匹配状态",
								prop: "isMatch",
								type: "radio",
							},
						],
						table: [{
								title: "车牌号码",
								key: "vehCodeColor",
								$width: '90px',
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							},
							{
								title: "高速通行时间",
								key: "transTime",
								$width: '130px',
							},
							{
								title: "运单装货时间",
								key: "loadingTime",
								$width: '130px',
							},
							{
								title: "运单卸货时间",
								key: "unloadTime",
								$width: '130px',
							},
						]
					},
					cltxygjppl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: "input",
							},
							{
								label: "是否有轨迹",
								prop: "isExist",
								type: "radio",
							},
						],
						table: [{
								title: "车牌号码",
								key: "vehCodeColor",
								$width: '100px',
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							},
							{
								title: "高速通行时间",
								key: "transTime",
								$width: '140px',
							},
							{
								title: "有无轨迹",
								key: "isExist",
								$width: '100px',
								format: ({
									item
								}) => {

									if (item.isExist == 1) {
										return `<span   style="border:1px #0E9532 solid;padding:5px 20px;background:#E6FFF5;color:#0E9532">有轨迹</span>`;
									} else {
										return `<span  style="border:1px #D61010 solid;padding:5px 20px;background:#FFF3F5;color:#D61010">无轨迹</span>`;
									}

								},
							},
						],
					},
					clgjwzl: {
						search: [{
								label: "行政区划",
								prop: "areaName",
								type: "text",
							},
							{
								label: "所属企业",
								prop: "archiveName",
								type: "text",
							},
							{
								label: "车牌号码",
								prop: "vehCode",
								type: "input"
							},
							{
								label: "轨迹完整状态",
								prop: "isIntact",
								type: "radio",
							},
						],
						table: [{
								title: "车牌号码",
								key: "vehCodeColor",
								$width: '90px',
								format: ({
									item
								}) => {
									return item.vehCode + (item.vehColor && `(${item.vehColor})`);
								},
							}, {
								title: "正常里程",
								key: "normalMileage",
								$width: '120px',
							},
							{
								title: "里程总数",
								key: "mileageTotal",
								$width: '100px',
							},
							{
								title: "轨迹完整率",
								key: "trajectoryIntegrity",
								$width: '80px',
								format({
									item
								}) {
									return item.trajectoryIntegrity + "%";
								},
							},
						],
					}
				},
				configs: {
					yyclnsl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								checkResult: "0",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					jtzfcfajl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					dzydsyl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								fillingStatus: "0",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					jsyjf: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								// evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					clsxl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								onlineStatus: "0",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					cltxyydppl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								isMatch: "1",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					cltxygjppl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								isExist: "1",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					},
					clgjwzl: {
						tableInitAfter: (formData) => {
							Object.assign(formData, {
								isIntact: "1",
								archiveName: this.obj.rowData.archiveName,
								archiveCode: this.obj.rowData.archiveCode,
								areaCode: this.obj.rowData.areaCode,
								areaName: this.obj.rowData.areaName,
								evalSection: this.obj.rowData.holeParam.evalSection || this.obj.rowData
									.evalSection,
								evalSectionStage: this.obj.rowData.evalSectionStage,
								itemViewTable: this.obj.rowData.holeParam.itemViewTable || this.obj.rowData
									.simArchiveDetailVOList[0]?.itemViewTable,
							});
							return formData;
						},
					}
				},
				dataList: [],
				obj: {},
				tablePages: {
					current: 1,
					total: 0,
					size: -1
				},
				isSearch: false,
			};
		},
		mounted() {
			this.$api.getDict("check_result").then((res) => {
				this.options.yyclnsl = res.data.data.map((item) => {
					this.options.check_result_obj[item.dictKey] = item.dictValue;
					return {
						value: item.dictKey,
						label: item.dictValue,
					};
				});
			});
			this.queryClick()
		},
		onLoad(option) {
			this.obj = option
			this.obj.rowData = JSON.parse(this.obj.rowData)

			console.log(3123, this.viewConfig[this.obj.type])
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				const columns = this.viewConfig[this.obj.type];
				if (columns && columns.search) {
					columns.search.forEach((item) => {
						this.$set(this.formData, item.prop, "");
					});
				}
				const configs = this.configs[this.obj.type];
				if (configs && configs.tableInitAfter) {
					this.formData = configs.tableInitAfter(this.formData);
				}

			},
			// 点击查询 
			queryClick() {
				this.isSearch = false
				const data = {
					...this.tablePages,
					...this.formData
				}
				api.queryCarVOList(data).then(res => {
					// console.log(res)
					this.dataList = res.data.data.records
					if (this.dataList.length == 0) {
						this.$refs['refTable'].isLoading = true
					} else {
						this.$refs['refTable'].isLoading = false
					}
				})
			},

			// 右上角搜索
			onNavigationBarButtonTap(event) {
				this.isSearch = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #F2F2F2;
		padding: 20px;
	}

	.details {
		width: 100%;
		height: 100%;
		// border: 1px red solid;
		background: #FFFFFF;
		border-radius: 10px;
		color: #666666;
		// padding: 10px;

		.details_top {
			line-height: 40px;

			.inputView {
				display: flex;
				align-items: center;

			}

			.text_label {
				width: 180rpx;
				text-align: center;
				display: inline-block;
			}

			.but {
				width: 90%;
				margin-top: 10px;
			}
		}

		.tableCss {
			height: 90vh;
		}

	}
</style>
